import React, { Component } from 'react';
import Container from './Container';
import '../css/doc.scss';

class Doc extends Component {
      render() {
            return (
                  <Container title="说明">
                        <div className="doc-container">
                              <div className="doc-flex-container">
                                    <div className="text-p">
                                          感谢Binaryify的 <a href="https://github.com/Binaryify/NeteaseCloudMusicApi" target="_blank" rel="noopener noreferrer">NeteaseCloudMusicApi</a> ，NodeJs版本的网易云音乐API
                                    </div>
                                    <div className="text-p">
                                          感谢百度FE开源的<a href="https://ecomfe.github.io/zrender-doc/public/" target="_blank" rel="noopener noreferrer">Zrender</a>，Canvas & SVG 轻量渲染引擎
                                    </div>
                                    <div className="text-p">
                                          之前曾做过一个音乐可视化的小玩意儿，现在学了React，使用React和React Router4对之前的小项目进行了重构，也算是React实践吧，从对React一知半解，到现在了解并会使用一些React的高阶知识和用法，也经历了一段日子，这段日子里，我一直在思考，我对工具链的着迷是否是错误的，还是说我喜欢一些“肤浅”的东西，并不想深挖。但这个小项目快要结束的时候，我想通了，并不是我对工具链着迷，其实正是因为工具里包含着许多我不曾了解的知识我才热衷于发掘新工具，并使用它们。
                                    </div>
                                    <div className="text-p">
                                          在前端领域，各种“轮子”层出不穷，有的是在重复，有的是在改进，有的是技术革新-多么像人类历史上智人的进化历程，从蹒跚学步，到上蹿下跳，再到直立行走；从砖木取火，到第一次工业革命发明蒸汽机，人类进入电气时代，再到现在，人类发明了因特网，进入互联网时代，这一切的的一切，都是我们对工具和技术的向往而产生的结晶。智人与动物最本质的区别是，智人会创造并使用工具，所以我想通了，人类已经存在了700万年，才进化成如今的模样，而互联网才诞生不到100年，相当于还处于“刀耕火种”的时代，所以对工具和技术的追求，是正确的，我们构建的是工程，而你并不需要了解它的每一个细节，你要做的事情就是组装各个模块，make it work better！
                                    </div>
                                    <div className="text-p">
                                          这个小项目的GitHub地址：<a href="https://github.com/ATURBO/supervisualfm" target="_blank" rel="noopener noreferrer">Super Visual FM</a>
                                    </div>
                              </div>
                        </div>
                  </Container>
            )
      }
}

export default Doc;
